<template>
  <div class="home">
    <el-card class="box-card">
      <el-row :gutter="10">
        <el-col :span="4">
          <el-avatar
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            :size="100"
          />
        </el-col>
        <el-col :span="20">
          <h1 style="line-height: 100px">
            欢迎{{ commonStore.user.username }}使用个人博客管理系统！{{
              welcomeText
            }}
          </h1>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card" style="height: 390px">
      <template #header>我的博客</template>
      <div v-if="blogStore.blogContent && blogStore.blogContent.length == 0">
        <el-button type="primary" @click="toAddBlog" class="add"
          >去创建博客</el-button
        >
        <el-empty description="description" />
      </div>
      <div v-else>
        <el-table
          :data="blogStore.blogContent"
          border
          stripe
          style="width: 100%"
          highlight-current-row
        >
          <el-table-column prop="createTime" label="创建时间" width="180" />
          <el-table-column prop="author" label="作者" width="100" />
          <el-table-column prop="title" label="博客名称" width="180" />
          <el-table-column prop="content" label="博客内容" width="405" />

          <el-table-column label="操作" width="120">
            <el-button type="danger" :icon="Delete" circle @click="toDelete"/>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script name="home" setup>
import {Delete} from "@element-plus/icons-vue";

import { ref, computed, reactive } from "vue";
import { useHomeStore } from "@/store/home";
import { useCommonStore } from "@/store/common";
import { useBlogStore } from "@/store/Blog";
import { useRouter } from "vue-router";
const router = useRouter();
const homeStore = useHomeStore();
const commonStore = useCommonStore();
const blogStore=useBlogStore()
console.log(blogStore.blogContent,'===',blogStore);

const welcomeText = computed(() => {
  return new Date().getHours() < 12
    ? homeStore.welcomeText[0]
    : homeStore.welcomeText[1];
});

const toAddBlog = () => {
  router.push({
    path: "/mainBox/myBlog/addBlog",
  });
};
const toDelete=()=>{
  console.log('删除博客');
  
}
</script>

<style lang="scss" scoped>
.box-card {
  margin-top: 20px;
  h1 {
    font-size: 20px;
    vertical-align: middle;
  }
  .add {
    float: right;
  }
}
</style>
